您如何为用于 jquery 编码的菜单栏正确编写 CSS 代码？答案

【问题标题】：How do you correctly write CSS code for a menubar intended for jquery coding?您如何为用于 jquery 编码的菜单栏正确编写 CSS 代码？
【发布时间】：2015-08-15 15:06:24
【问题描述】：

我想复制我在此处看到的网站的确切外观：iananthonyphotography.com。

它是使用 spry 创建的菜单栏和 jquery 的滑块。

对于我的新站点，我想将 jquery 用于菜单栏和滑块。我做滑块没问题，但菜单栏给我带来了很多问题。

下面是我将用于栏的实际文本的 jsfiddle。

如您所见，所有内容都完美排列，并且在水平滚动时保持在页面中心。但是我的编码在很多方面都是错误的。我需要为 ul 或 ul 和 li 项目赋予样式或 id，以便我可以隐藏菜单的子项目，然后分配 jquery 代码以在鼠标悬停期间显示它。

您在 jfiddle 中看到的内容代表了我在遇到许多问题后所做的拙劣努力。任何人都可以帮我清理css代码吗？对于设计师或开发人员来说，这是小菜一碟，但对我来说却不是。

完整的css代码请参考jsfiddle。我不会花半个小时在每行文本之前放置四个空格来发这篇文章，否则我会直接在这里发布代码。

https://jsfiddle.net/ianant/faaccqt8/

https://jsfiddle.net/ianant/faaccqt8/embedded/result/

a:link {
text-decoration: none;
}

【问题讨论】：

域已过期，所以我看不到它应该是什么样子。你有截图或类似的网站吗？

标签： jquery css menubar

【解决方案1】：

我认为这就是你所需要的。如果您需要进行大量清理工作，那么花钱请开发人员来完成这项工作可能是最好的解决方案。

$('nav ul li').on('mouseover',function(){
		$(this).children('ul').show();
	 }).on('mouseleave',function(){
        $(this).children('ul').hide();
     })

body {
	background-image: url(images/homepage_images/frontpage.jpg);
	background-position: top center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	margin: 0px;
}

body, td, th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 13px;
}

a {
	text-decoration: none;
}

nav ul.nav-list {
    text-align: center; 
	width: 1000px;
	margin: 0 auto;
}

nav ul.nav-list li {
	display: inline-block;
    line-height: 1.5em;
}

ul.nav-list > li {
    position: relative;
	width: 200px;
}

ul.nav-list > li > a:hover {
	background-color: #F0F;
}

nav ul li ul.dropdown {
    display: none;    
}

ul.dropdown li {
    position: absolute;
    background-color:#C3C;
    left: 0;
    width: 200px;
    z-index: 1;
}

ul.dropdown li a {
    color: #ddd;
}

ul.dropdown li a:hover {
     background-color: #0C3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="wrapper">
<nav class="main-nav">
<ul class="nav-list">
  <li><a href="#">About</a>
    <ul class="dropdown">
      <li><a href="#">The Park</a></li>
    </ul>
  </li>
  <li><a href="#">Updates</a>
    <ul class="dropdown">
      <li><a href="slieshow.html">Slideshow</a></li>
    </ul>
  </li>
  <li><a href="#">Trailers</a></li>
  <li><a href="#">Support</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>
</div>

【讨论】：