我的导航菜单栏看起来不错（第一次建造）。完成构建导航菜单栏后，当我开始在“div”中添加我的旁边，主要和页脚元素时，我遇到了一些问题。
我试图漂浮在旁边并且主要并排在底部但是每当我的鼠标悬停在具有子菜单的“nav #Menu .MenuList”时;除此之外，主要和页脚元素搞砸了。所有这些看起来都很“清楚：两者”当鼠标没有悬停在“nav #Menu .MenuList”上时，它很好。
我认为是因为伪元素“nav #Menu :: after {......}”中的“clear：both”。我认为“nav #Menu”之后的所有内容都“明确：两者兼而有之”。
我不想弄乱我的导航，所以我尝试在“nav #Menu .MenuList”中使用“display：inline / inline-table / inline-block”而不是使用“float：left”并删除伪元素“nav #Menu :: after {......}”。为此，当我的鼠标悬停在“nav #Menu .MenuList”上时，“nav #Menu {......}”的背景会变得混乱。高度不断变化/背景完全消失。
为了您的信息，我还使用了HTML5医生的CSS重置功能。 （在我看来，我认为使用像我这样的BEGINNERS的GENERAL CSS重置可以更好地处理CSS）
HTML5在这里：
<div>
<header>
</header>
<nav>
<ul id="Menu">
<li class="MenuList">
<a href="#">blabla</a>
</li>
<li class="MenuList">
<a href="#">blabla</a>
</li>
<li class="MenuList">
<a href="#">blabla</a>
<ul class="SubMenu">
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="MenuList">
<a href="#">blabla</a>
<ul class="SubMenu">
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
<ul class="SubDrop">
<li class="SubDropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
<li class="DropList">
<a href="#">blabla</a>
<ul class="SubDrop">
<li class="SubDropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
<li class="DropList">
<a href="#">blabla</a>
<ul class="SubDrop">
<li class="SubDropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside>
</aside>
<main>
</main>
<footer>
</footer>
</div>
CSS就在这里：
div
{
width : 980px ; height : auto ; margin-left : auto ; margin-right : auto ;
}
header
{
background-color : #FFFFFF ; width : 100% ; height : 200px ; margin-left : auto ; margin-right : auto ;
}
nav
{
background-color : #FFFFFF ; font-family : "Comic Sans MS" , cursive , sans-serif ; font-size : 1em ; width : 100% ; height : auto ;
margin-left : auto ; margin-right : auto ;
}
nav #Menu
{
line-height : 35px ; background : linear-gradient( #00FFFF , #4D70DB ) ; border-style : solid ; border-color : #999999 ;
border-radius : 5px ;
}
nav #Menu .MenuList
{
float : left ; width : 7em ; text-align : center ; position : relative ;
}
nav #Menu::after
{
content : '.' ; visibility : hidden ; clear : both ;
}
nav #Menu .MenuList > a
{
font-weight : 550 ; text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList:hover
{
background : linear-gradient( #A3A3A3 , #5C5C5C ) ; border-style : solid ; border-color : #999999 ; border-radius : 5px ;
}
nav #Menu .MenuList:hover > a
{
color : #FFFFFF ;
}
nav #Menu .MenuList .SubMenu
{
display : none ;
}
nav #Menu .MenuList:hover .SubMenu
{
display : block ; position : relative ; top : 100% ; box-shadow : 0.7px 0.7px 1px #777777 ; background-color : #FFFFFF ;
border-width : 1px ; border-radius : 5px ; border-style : solid ; border-color : #d8d9da ;
}
nav #Menu .MenuList:hover .SubMenu .SubMenuList
{
width : 7em ; text-align : center ; position : relative ;
}
nav #Menu .MenuList:hover .SubMenu .SubMenuList > a
{
text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList:hover .SubMenu .SubMenuList:hover > a
{
color : #7FFFD4 ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop
{
display : none ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop
{
display : block ; position : absolute ; top : 0 ; left : 100% ; box-shadow : 0.7px 0.7px 1px #777777 ;
background-color : #FFFFFF ; border-width : 1px ; border-radius : 5px ; border-style : solid ; border-color : #d8d9da ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop .DropList
{
width : 7em ; text-align : center ; position : relative ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop .DropList > a
{
text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop .DropList:hover > a
{
color : #7FFFD4 ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList .SubDrop
{
display : none ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop
{
display : block ; position : absolute ; top : 0 ; left : 101.5% ; box-shadow : 0.7px 0.7px 1px #777777 ;
background-color : #FFFFFF ; border-width : 1px ; border-radius : 5px ; border-style : solid ; border-color : #d8d9da ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop .SubDropList
{
width : 7em ; text-align : center ; position : relative ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop .SubDropList > a
{
text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop .SubDropList:hover > a
{
color : #7FFFD4 ;
}
aside
{
background-color : #FFFFFF ; width : 22.5% ; height : 500px ; float : left ;
}
main
{
background-color : #000000 ; width : 77.5% ; height : 500px ; float : right ;
}
footer
{
background-color : red ; width : 100% ; height : 200px ; clear : both ;
}
答案 0 :(得分：0)
你搞砸了很多css。但这仍然是我为使其发挥作用而做的。
实际上你已经漂浮在一边，主要的，你应该做的是向左边漂浮，不要漂浮主要，只要给它一个隐藏溢出的属性。
另外，下拉菜单也是一个问题。它应该是绝对的，所以要坚持一切。并且您在悬停后应用于菜单的边框，增加了菜单的高度，这就是为什么所有布局搞砸了
此处为working code
<强> HTML：
<div>
<nav>
<ul id="Menu">
<li class="MenuList">
<a href="#">blabla</a>
</li>
<li class="MenuList">
<a href="#">blabla</a>
</li>
<li class="MenuList">
<a href="#">blabla</a>
<ul class="SubMenu">
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="MenuList">
<a href="#">blabla</a>
<ul class="SubMenu">
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
<ul class="SubDrop">
<li class="SubDropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
<li class="DropList">
<a href="#">blabla</a>
<ul class="SubDrop">
<li class="SubDropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
<li class="DropList">
<a href="#">blabla</a>
<ul class="SubDrop">
<li class="SubDropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="SubMenuList">
<a href="#">blabla</a>
<ul class="Drop">
<li class="DropList">
<a href="#">blabla</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<aside>
</aside>
<main>
</main>
<footer>
</footer>
</div>
<强> CSS：
*{list-style:none;padding:0;margin:0;}
div
{
width : 980px ; height : auto ; margin-left : auto ; margin-right : auto ;
}
header
{
background-color : #FFFFFF ; width : 100% ; height : 200px ; margin-left : auto ; margin-right : auto ;
}
nav
{
background-color : #FFFFFF ; font-family : "Comic Sans MS" , cursive , sans-serif ; font-size : 1em ; width : 100% ; height : auto ;
margin-left : auto ; margin-right : auto ;
}
nav #Menu
{
line-height : 35px ; background : linear-gradient( #00FFFF , #4D70DB ) ; border-style : solid ; border-color : #999999 ;
border-radius : 5px ;
}
nav #Menu .MenuList
{
float : left ; width : 7em ; text-align : center ; position : relative ;
}
nav #Menu::after
{
content : '.' ; visibility : hidden ; clear : both ;
}
nav #Menu .MenuList > a
{
font-weight : 550 ; text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList:hover
{
background : linear-gradient( #A3A3A3 , #5C5C5C );
}
nav #Menu .MenuList:hover > a
{
color : #FFFFFF ;
}
nav #Menu .MenuList .SubMenu
{
display : none ;position:absolute;
}
nav #Menu .MenuList:hover .SubMenu
{
display : block ;box-shadow : 0.7px 0.7px 1px #777777 ; background-color : #FFFFFF ;
border-width : 1px ; border-radius : 5px ; border-style : solid ; border-color : #d8d9da ;position:absolute;
}
nav #Menu .MenuList:hover .SubMenu .SubMenuList
{
width : 7em ; text-align : center ; position : relative ;
}
nav #Menu .MenuList:hover .SubMenu .SubMenuList > a
{
text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList:hover .SubMenu .SubMenuList:hover > a
{
color : #7FFFD4 ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop
{
display : none ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop
{
display : block ; position : absolute ; top : 0 ; left : 100% ; box-shadow : 0.7px 0.7px 1px #777777 ;
background-color : #FFFFFF ; border-width : 1px ; border-radius : 5px ; border-style : solid ; border-color : #d8d9da ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop .DropList
{
width : 7em ; text-align : center ; position : relative ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop .DropList > a
{
text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList .SubMenu .SubMenuList:hover .Drop .DropList:hover > a
{
color : #7FFFD4 ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList .SubDrop
{
display : none ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop
{
display : block ; position : absolute ; top : 0 ; left : 101.5% ; box-shadow : 0.7px 0.7px 1px #777777 ;
background-color : #FFFFFF ; border-width : 1px ; border-radius : 5px ; border-style : solid ; border-color : #d8d9da ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop .SubDropList
{
width : 7em ; text-align : center ; position : relative ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop .SubDropList > a
{
text-decoration : none ; color : #000000 ; cursor : default ;
}
nav #Menu .MenuList .SubMenu .SubMenuList .Drop .DropList:hover .SubDrop .SubDropList:hover > a
{
color : #7FFFD4 ;
}
aside
{
background-color : #FFFFFF ; width : 22.5% ; height : 500px ; float : left ;
}
main
{
background-color : #000000 ; width : 77.5% ; height : 500px ;overflow:hidden;
}
footer
{
background-color : red ; width : 100% ; height : 200px ;
}