Javascript 导航-透明，水平居中，难以进行亚导航

我会创造这个。 我用css和js做了一些尝试。 但它并不是在每一个浏览器上都能工作，我认为代码是肮脏的

导航悬停的角度是长度的中心。透明传动角位于蓝色传动角下方，副航（或欠航）机身宽度灵活

你有没有一些想法来创建这个干净的导航？可能没有JS

我希望你能帮助我。我花了这么多的时间，它不能正常工作

你的，黄色

$（.active”）.mouseover（函数（）{
var xbreite=此.offsetWidth；
//布雷特冯导航潜艇
var ybreite=this.nextElementSibling.offsetWidth；
var zbreite=ybreite-xbreite；
var xb=xbreite/2；
xb=xb-23；
var zb=ybreite-xb；
xb=xb+“px”；
zb=zb+“px”；
//log（this.nextElementSibling.firstElementChild.firstElementChild）；
//部门休息->基本要素和风格
var rest=this.nextElementSibling.firstElementChild.firstElementChild；
rest.style.width=xb；
var eck=this.nextElementSibling.firstElementChild.lastElementChild；
eck.style.width=zb；
//Subnav sichtbar machen
//this.nextElementSibling.style.top='59px'；
this.nextElementSibling.style.visibility='visible'；
});
//苏纳维·施利恩
$（“.nav sub”）.mouseleave（函数（）{
var-navsubs=$（'.navsub'）；
变量子计数=$（navsubs）.length；
对于（hilf=0；hilf
.bcg{
位置：绝对位置；
z指数：2；
}
.标题{
位置：固定；
高度：84px；
z指数：10；
背景色：#579dd3；
不透明度：0.75；
宽度：100%；
z指数：100；
}
.logo{
浮动：左；
左侧填充：1.875em；
垫面：0.938em；
}
.导航{
浮动：左；
}
/*导航原件*/
.nav prim{
字体系列：“HelveticaNeue灯”，“Helvetica Neue灯”，“Helvetica Neue”，Helvetica，Arial，“Lucida Grande”，无衬线；
位置：绝对位置；
右：1.64em；
底部：-1.2米；
字号：17px；
文本转换：大写；
z指数：999；
}
/*德雷耶克导航原则*/
.海军首席执行官{
位置：相对位置；
}
.nav prim ul li a:悬停：：之后{
背景图像：url（“http://mattgelb.canopus.uberspace.de/nav_active.png");
底部：-12px；
内容：“；
显示：块；
高度：32px；
位置：绝对位置；
宽度：65px；
左：0；
右：0；
左边距：自动；
右边距：自动；
}
/*Aktiver链路*/
.nav prim.active{
位置：相对位置；
}
.nav prim.active:：after{
背景图像：url（“http://mattgelb.canopus.uberspace.de/nav_active.png");
底部：-12px；
内容：“；
显示：块；
高度：32px；
位置：绝对位置；
宽度：65px；
左：0；
右：0；
左边距：自动；
右边距：自动；
}
/*恩德·德雷耶克导航原则*/
李国荣先生{
浮动：左；
列表样式：无；
左侧填充：0.7em；
右侧填充：0.7em；
/*位置：相对位置*/
}
李：最后一个孩子{
右边填充：0；
}
.海军首席执行官{
文字装饰：无；
颜色：白色；
高度：56px；
显示：块；
}
/*亚导航*/
.导航潜艇{
位置：绝对位置；
颜色：蓝色；
填充：0；
保证金：0；
z指数：11111；
可见性：隐藏；
顶部：59px；
/* 
显示：无*/
}
李副导航{
明确：两者皆有；
填充：0！重要；
保证金：0；
背景色：白色；
宽度：100%；
}
.nav sub li：第一个孩子{
背景色：透明；
填充：0；
保证金：0；
} 
.nav sub.eck{
背景图像：url（'http://mattgelb.canopus.uberspace.de/nav_bg_active.png');
背景重复：无重复；
高度：25px；
浮动：左；
}
.nav sub.rest{
背景色：白色；
高度：25px；
宽度：30%；浮动：左侧；
}
.nav sub a{
颜色：蓝色！重要；
文本转换：无；
}
.nav sub a：悬停{
颜色：红色！重要；
背景图像：无！重要；
}
.nav sub a:悬停：：之后{
边界：0！重要；
背景图像：无！重要；
}

























嗨，你可以用这样的东西

HTML

<div class="nav"> 
      <div class="nav-prim">  
            <ul>
              <li>
                <a class="active" href="#">Tätigkeitsbereiche</a>
                <ul class="nav-sub"> 
                  <li>  
                    <div class="rest">
                      <div class="eck"></div> 
                    </div> 

                  </li>  
                  <li><a href="#g">Seite 1</a></li> 
                  <li><a href="#g">Coperate dsfsdfsdf Events  blubb blieeee</a></li>
                </ul> 

              </li>
              <li>
                <a href="#">Leistungen</a>
              </li>
              <li>
                <a href="#">Projekte</a>

              </li> 
              <li>  
                <a class="active" href="#">Fähigkeiten</a> 
                <ul class="nav-sub"> 
                  <li>  
                    <div class="rest"><div class="eck"></div></div>   

                  </li>  
                  <li><a href="#g">Seite 1</a></li> 
                  <li><a href="#g">Coperate dsfsdfsdf Events  blubb blieeee</a></li>
                </ul> 

              </li>
              <li>
                <a href="#">Aktuelles</a>
              </li>
            </ul>
      </div>
    </div>

您也可以在这里查看小提琴
哦，我看到它的工作原理并非100%正确。如果子导航的名称长于主导航，则链接断开。但次导航的盒子应为100%。你明白我的意思吗？我发现亚航行的角度是不透明的：(
body
{
  background-color : #eeeeee;
}
div.nav ul
{
    list-style-type : none;
}

div.nav ul li
{
    font-family: Arial, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    color:black;
    float: left;
    padding: 10px;
    vertical-align: middle;
    text-transform:uppercase;
  position : relative;
  background-color : #0000ff;
}

div.nav a
{
    color:black;    
}

div.nav li ul 
{
    display: none;
    position : absolute;
    top : 100%;
    left : -40px;
    padding-top : 5px;
}

div.nav li:hover ul 
{
    display: block;
    position: absolute;
    z-index: 999;    
}

div.nav li:hover li 
{
    float:none; 
    padding: 0;
    text-align:left;
}

div.nav li:hover li a 
{ 
    min-width: 150px;
    display:block;
}

.rest {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #eeeeee;
  margin-left : 10px;
  position : relative;
}

.eck {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #0000ff;
  margin-left : 10px;
  position : absolute;
  top : -25px;
  left : -30px;
  z-index : 999;
}