将鼠标悬停添加到下拉菜单

Question

我需要修改现有菜单并添加$(window).load(function status(){ $(function status() { $.get('/status.php', function(data) { $('#valuedata').html(data['valuedata']); }); setTimeout(status, 10000); }); }); hoverable菜单

dropdown

<style>
 body {
  margin: 0;
  font-size: 28px;
}
.header {
  background-color: #f1f1f1;
  padding: 30px;//my_rasstojanie pod logo header
  text-align: center;
}
#navbar {
	//background: url('img/logobogner.png') no-repeat scroll 0 0 transparent;
	border-top: 1px solid #a3a3a3;
	border-bottom: 1px solid #a3a3a3;
	min-height:50px;
	text-align:center;
    
    list-style: none;
    //background-color:#fff;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;
}
#navbar a {

   display: inline;
    font-size: 14px;
	color: #a3a3a3;
	//font: 15px arial, sans-serif;
}
#navbar a+a:before {
   padding: 8px;
    color: #a3a3a3;
    content: "|\00a0";
}
#navbar a:hover {
  color: white;
  text-decoration: none; 
  //  text-decoration: underline;
}
#navbar a.active {
  //background-color: #000;
  //color: white;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
</style>

Answer 1

在这里，只需在要删除的元素的li里面再添加一个ul li。

 body {
  margin: 0;
  font-size: 28px;
}
.header {
  background-color: #f1f1f1;
  padding: 30px;//my_rasstojanie pod logo header
  text-align: center;
}
#navbar {
	//background: url('img/logobogner.png') no-repeat scroll 0 0 transparent;
	border-top: 1px solid #a3a3a3;
	border-bottom: 1px solid #a3a3a3;
	min-height:50px;
	text-align:center;
    
    list-style: none;
    //background-color:#fff;
	background: rgba(0, 0, 0, 0.5);
	z-index: 100;
}
#navbar a {
   display: inline;
    font-size: 14px;
	color: #a3a3a3;
	//font: 15px arial, sans-serif;
}
#navbar a+a:before {
   padding: 8px;
    color: #a3a3a3;
    content: "|\00a0";
}
#navbar a:hover {
  color: white;
  text-decoration: none; 
  //  text-decoration: underline;
}
#navbar a.active {
  //background-color: #000;
  //color: white;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}
.sticky + .content {
  padding-top: 60px;
}
/** Edited codes **/
#navbar{
  background:#6f6f6f;
}
#navbar ul{
  padding-left:0;
}
#navbar ul li{
  display:inline-block;
  list-style:none;
  position:reative;
}
#navbar ul ul{
  position:absolute;
  background:#6f6f6f;
  opacity:0;
  visibility:hidden;
}
#navbar ul li:hover ul{
  opacity:1;
  visibility:visible;
}
#navbar ul ul li{
  display:block;
  padding:0 10px;
}

<div id="navbar">
<ul>
  <li><a href="#o_nas">Link1</a>
    <ul>
    <li><a href="#suveniry">Link2</a></li>
    <li><a href="#firmstile">Link3</a></li>
    <li><a href="#cddvd">Link4</a></li>
    <li><a href="#otkrytki">Link5</a></li>
    <li><a href="#etiketki">Link6</a></li>
    </ul>
  </li>
  <li><a href="#paket">Link7</a>
    <ul>
      <li><a href="#buklet">Link8</a></li>
      <li><a href="#sites">Link9</a></li>
    </ul>
  </li>
  <li><a href="ka2er/architecture.htm">Link10</a></li>
  <li><a href="#contacts">Link11</a></li>
  </ul>
</div>