1

我是 HTML 和 CSS 的新手，大约一周前开始使用，现在我无法移动使用网站生成的导航栏。当我尝试使用margin-bottomormargin-top时，整个导航栏会完全展开，但不会移动。我尝试过使用position: absolute并尝试设置这样的位置，但随后完全崩溃，但它似乎确实在移动。

HTML

 <div class="mainmenu">
 <ul> 
 <li><a class=current href="/index.html"> Home</a></li>
 <li><a  href="/lesmiserbales.html">Les Miserables</a></li>
 <li><a  href="/chicago.html">Chicago</a></li>
 <li><a  href="/shrek.html">Shrek</a></li>
 <li><a  href="/phtanomoftheopera.html">Phantom Of The Opera</a></li>
 <li><a  href="/wicked.html">Wicked</a></li>
 <li><a  href="tickets.html">Tickets</a></li> 
 <li><a  href="/htfs.html">How To Find Us</a></li>
 <li><a  href="/contactus.html">Contact Us</a></li>
 </ul>

CSS

.mainmenu a {

color: #ffffff;
border: 0px solid;
background-color: #302E2E;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
font: 12px Arial;
font-weight: normal;
text-decoration: none;
border-color: #000000;
display: block;
margin: 0px;
width: 100px;
text-align: left;
z-index:2;
position: absolute;
top: 50px;
}

.mainmenu a:visited { color: #ffffff; }

.mainmenu a:hover {
border: 0px solid;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 4px;
background-color: #333030;
border-color: #000000;
color: #000000;
font: 12px Arial;
font-weight: normal;
text-decoration: none;
text-align: left;
display: block;
width: 100px;

 }


 .mainmenu ul {
list-style:none;
margin: 0;
padding: 0;

 }

.mainmenu li {

margin: 0;
    padding-top: 1px;
padding-bottom: 1px;
}

任何帮助将不胜感激，如果我犯了菜鸟错误或其他什么，我们深表歉意

4

2 回答 2

1

从你的 CSS 中移除 : position: absolute

在您的 css 中添加休闲：

.mainmenu {
margin-top: 200px;
}
于 2013-11-14T13:38:37.133 回答
1

您的 CSS 定位每个菜单项而不是菜单本身。删除position: absolute;并放入新的声明top: 50px;中.mainmenu a.mainmenu

.mainmenu a {
    ...
    /*
    GET RID OF THESE:
    position: absolute;
    top: 50px; 
    */
}

/* ADD THIS */
.mainmenu {        
    position: absolute;
    top: 50px;
}

就像我在这个 JSFiddle中所做的一样

于 2013-11-14T14:01:54.670 回答