PHP的水平菜單設計爲第一個元素打破？

-3

有人能告訴我爲什麼設計在菜單中的第一個元素中斷了嗎？PHP的水平菜單設計爲第一個元素打破？

這是的代碼。

<html> 
<head> 
<title>Dynamic Drop Down menu in php</title> 
<link href="css/menustyle.css" rel="stylesheet"> 
</head> 
<body> 
<ul id="menu"> 
       <li><img src="logo.png"></li> 
       <li><a href="home.php">Home</li> 
       <li><a href="index.php">Forms</li> 
       <li><a href="#">Databases</li> 
       <li><a href="login.php">Account</li> 
       <li><a href="#">Support</li> 
      </ul> 
</body> 
</html> 


<style type="text/css"> 
ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    margin-left: 1px; 
    white-space: nowrap; 
} 
ul li a:hover { 
background: #3b3b3b; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { background: #3b3b3b; } 
li:hover li a:hover { 
    background: #1e7c9a; 
} 

</style>

enter image description here

來源

2013-05-08 Hitendra

，因爲您的標記是無效的，你不要關閉您的''標籤 – Ohgodwhy 2013-05-08 05:21:41

您不關閉任何a標籤在您的標記

<li><a href="home.php">Home</a></li> 
         ----^----

來源

2013-05-08 05:22:53

我試過了，但沒有效果。 – Hitendra 2013-05-08 05:30:12

@Hitendra你做錯了什麼http://jsfiddle.net/uP5Be/ – 2013-05-08 05:31:47

@Alien我從鏈接複製CSS和HTML的代碼，但相同result.It看起來不錯，在給定的鏈接。你能猜出可能是什麼原因嗎？ – Hitendra 2013-05-08 05:38:09

這裏是您的解決方案小提琴：

Demo

問題與錨標籤closi只有ng。

<ul id="menu"> 
    <li><img src="logo.png"/></li> 
    <li><a href="home.php">Home</a></li> 
    <li><a href="index.php">Forms</a></li> 
    <li><a href="#">Databases</a></li> 
    <li><a href="login.php">Account</a></li> 
    <li><a href="#">Support</a></li> 
</ul>

來源

2013-05-08 05:24:30

不要格式化鏈接-1，分享你的代碼，我會收回-1 http://meta.stackexchange.com/questions/174690/users-fooling-stackoverflow-by-highlighting-jsfiddle-links-取而代之的是 – 2013-05-08 05:24:52

@ Mr.Alien：謝謝你的指導。 – 2013-05-08 05:29:02

-1

您還需要爲img標記添加css規則。

您有：

ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    margin-left: 1px; 
    white-space: nowrap; 
}

但你還需要：

ul li img { 
    Some CSS for the img block 
}

在你的CSS ...

來源

2013-05-08 05:25:27 cAS666666

我試過了，它改變了圖像的背景爲藍色，但沒有解決我的查詢。 – Hitendra 2013-05-08 05:30:44

這是一個建議改進的設計，以在該上下文中爲img添加css，如果標籤當然是您不需要破壞佈局的關鍵，但對於「設計」（演示文稿的樣式）您需要應用一個包含img-tag的演示文稿的css規則，否則如果您更改了圖像並且它具有不同的屬性，那麼您的「設計」可能會以不需要的方式呈現它自己。我看到你已經指定了你如何喜歡你的孩子表現出來，但不是孩子在裏面。 – cAS666666 2013-05-08 16:25:04

PHP的水平菜單設計爲第一個元素打破？

回答

相關問題