18910140161

HTML-下拉菜单在中间打开主菜单-堆栈溢出

顺晟科技

2022-10-18 14:14:36

105

我有一个带有下拉菜单的菜单,当鼠标悬停在主菜单项上时,下拉菜单列表打开时会不对齐,就像依赖于主菜单项一样(主页-我的服务项目-博客-我的产品等),一些地方下拉列表出现在中间,一些地方在右边,我想我的下拉菜单出现在主菜单的中间。先谢谢了.

header.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 11;
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
  background-color: #00666a;
}

header.header .main--header-wrap {
  /*border-bottom: 1px solid #bbb*/
}

.header-login-section {
  background-color: #009297;
  padding: 0px 25px 0px 25px;
  position: relative;
  top: 0px;
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
  display: none;
}

header.header .main--header-wrap .main--header-main {
  /*padding: 15px 0*/
}

header.header .main--header-wrap .main--header-main ul.social--icons li {
  padding-right: 15px
}

header.header .main--header-wrap .main--header-main ul.social--icons li a {
  font-size: 1.5em;
  color: #fff
}

header.header .main--header-wrap .main--header-main ul.social--icons li a:hover {
  font-size: 1.5em;
  color: #fff;
  border-bottom: 1px solid #ffc20e;
  padding-bottom: 10px;
}

header.header .main--header-wrap .main--header-main ul.social--icons li:last-child {
  /*padding-right: 0*/
}

header.header .main--header-wrap .main--header-main .moelogo {
  max-width: 170px
}

header.header .main--header-wrap .main--header-main .siilogo {
  max-width: 200px
}

header.header .menu_navbar .menu--navbar-inner {
  padding: 15px 0
}

header.header .menu_navbar .menu--navbar-inner li {
  text-transform: uppercase;
  font-size: 1.0em;
  font-weight: 100;
  position: relative
}

header.header .menu_navbar .menu--navbar-inner li a {
  color: #fff;
  padding: 10px 0;
  margin-right: 25px;
  font-weight: 600;
  margin-bottom: 15px;
}

header.header .menu_navbar .menu--navbar-inner .navigation li a:hover {
  color: #ffc20e;
}

header.header .menu_navbar .menu--navbar-inner .navigation li a:hover:after {
  width: 10%;
  /*left: 0;*/
  color: #ffc20e;
}

header.header .menu_navbar .menu--navbar-inner .navigation li:last-child a {
  margin-right: 0
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down {
  width: 250px;
  background-color: #009297;
  display: none;
  position: absolute;
  left: -78px;
  -webkit-box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
  box-shadow: 0 0 13.5px rgb(34 33 33 / 20%);
}

header.header .menu_navbar .menu--navbar-inner .navigation li .dropdown-down li {
  font-size: .938em;
  margin: 0;
}
<代码><;NAV CLASS=“菜单_导航栏”>;<;DIV类=“容器”>;<;DIV类=“ menu--navbar-inner ”>;<;Li>;<;A href=“#”>;主要菜单<;/A>;<;UL CLASS=“下拉菜单-向下”>;<;Li>;<;a href=“ plan-your-budget.HTML ”>;子菜单<;/a>;<;/Li>;<;Li>;<;A href=“ visa.HTML ”>;子菜单<;/A>;<;/Li>;<;Li>;<;A href=“ travel.HTML ”>;子菜单<;/A>;<;/Li>;<;Li>;<;A href=“ domestic-travel.HTML ”>;子菜单<;/A>;<;/Li>;<;Li>;<;A href=“ local-support.HTML ”>;子菜单<;/A>;<;/Li>;<;/UL>;<;/Li>;<;/DIV>;<;/DIV>;<;/导航>;


顺晟科技:

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航