我正在尝试使用列表制作具有固定定位和子菜单的导航栏。我不能让子菜单直接位于它的父UL之下。它走到了最左边。我需要在以下代码中添加什么?对不起,如果这太初学者......
<?php
//Navigation Bar
echo '<div id="nav_main">';
echo '<ul>';
echo '<li><a href="' . $defaultURL . '">LOGO</a></li>';
echo '<li><a href="logout.php">Category</a></li>';
if($login=='1'){
echo '<li><a href="#">Home</a></li>';
echo '<li><a href="#">Settings</a>'
.'<ul>'
.'<li><a href="logout.php">Log Out</a></li>'
.'</ul>'
.'</li>';
}else{
echo '<li><a id="register" href="signup.php">Join Today</a></li>';
echo '<li><a href="login.php">Sign in</a></li>';
}
echo '</ul>';
echo '</div>';
//Navigation Bar
?>
CSS:
#nav_main ul {
position:fixed;
margin: 0;
top: 0;
left: 0;
width: 100%;
padding: 12px;
background-color: #88B541;
box-shadow: 2px 2px 1px #888888;
-moz-box-shadow: 2px 2px 1px #888888;
-webkit-box-shadow: 2px 2px 1px #888888;
}
#nav_main li {
list-style-type: none;
display: inline;
font-size: 15px;
font-weight: bold;
padding: 20px;
}
#nav_main a {
color: #FFFFFF;
text-decoration: none;
}
#nav_main a:hover {
padding: 12px 8px;
background: #52A423;
}
#nav_main ul ul {
display: none;
width: auto;
}
#nav_main ul li:hover > ul {
margin: 45px;
display: block;
padding-left: 50px;
padding-right: 50px;
}
#nav_main ul ul li {
float: none;
}
上次修订的CSS:
ul.nav {
position:fixed; margin: 0; top: 0; left: 0; width: 100%;
background-color: #88B541; box-shadow: 2px 2px 1px #888888;
-moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}
ul.nav li a {
display: block; text-decoration: none; color: #FFFFFF; font-weight: bold; padding: 12px; font-size: 15px;
}
ul.nav > li {
float: left; position: relative;
}
ul.nav li a:hover {
background: #52A423;
}
ul.nav > li ul {
display: none; position: absolute; left: -1px; width: 150px; background-color: #88B541; box-shadow: 2px 2px 1px #888888;
-moz-box-shadow: 2px 2px 1px #888888; -webkit-box-shadow: 2px 2px 1px #888888;
}
ul.nav > li:hover ul { display: block; }
ul.nav > li ul li { display: block; }
子菜单左侧有空格,我更改了“display:inline-block;”在“ul.nav&gt; li”中“浮动:左”并且似乎不起作用。我也意识到子菜单没有在IE10中显示?我的CSS一定有问题...
答案 0 :(得分:2)
为什么不试试这个HTML / CSS结构?
<ul class="nav">
<li>
<a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
<li>
<a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
<li><a href="#">Sub Menu Item</a></li>
</ul>
</li>
</ul>
* {font-family: "Segoe UI", Tahoma;}
ul.nav {border-bottom: 1px solid #999;}
ul.nav li a {display: block; text-decoration: none; color: #333; padding: 5px; border: 1px solid #fff;}
ul.nav > li:hover {border: 1px solid #666; border-bottom: 1px solid #fff;}
ul.nav li a:hover {background: #ccc; border: 1px solid #999;}
ul.nav > li {display: inline-block; position: relative; border: 1px solid #fff;}
ul.nav > li ul {display: none; position: absolute; left: -1px; width: 150px; border: 1px solid #666; border-top-color: #fff; margin-top: 1px;}
ul.nav > li:hover ul {display: block;}
ul.nav > li ul li {display: block;} /* Vertical Menu */
ul.nav > li ul li {display: inline-block;} /* Horizontal Menu */