Question

我正在尝试创建一个执行以下操作的六边形菜单：

悬停在
是可点击的
有一个下拉菜单

我可以获得要突出显示的颜色和要显示的单词，但我无法使它们可点击。我只是想尽快让这个工作。 sample

我一直在玩jjiddle enter link description here

Html文件：

<div class="menu" data-depth="0.80">
            <ul>
                <li class="svg_hexagon" id="ut_main">
                    <a herf="../index.html">
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <span> UT Main </span>
                    </a>
                </li>

                <li class="svg_hexagon" id="home">
                    <a herf="../assign2/index.html">
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <span> Home </span>
                    </a>
                </li>

                <li class="svg_hexagon dropdown" id="about">
                    <a herf="#">
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <span> About </span>
                    </a>

                    <ul class="sub-menu">
                        <li>
                            <a herf="#">The Artist</a>
                        </li>

                        <li>
                            <a herf="#">The Work</a>
                        </li>
                    </ul>                       

                </li>

                <li class="svg_hexagon" id="info">
                    <a herf="#">
                        <!-- draw hexagon -->
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <!-- hexagon drawn -->
                        <span> Info </span>
                    </a>
                </li>

                <li class="svg_hexagon dropdown" id="contact">
                    <a herf="#">
                        <!-- draw hexagon -->
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <!-- hexagon drawn -->
                        <span> Contact </span>
                    </a>

                    <ul class="sub-menu">
                        <li>
                            <a herf="#">E-Mail</a>
                        </li>

                        <li>
                            <a herf="https://www.facebook.com/glen.newell">Facebook</a>
                        </li>
                    </ul>

                </li>

                <li class="svg_hexagon" id="blank1">
                    <a herf="#">
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <span> </span>
                    </a>
                </li>

                <li class="svg_hexagon" id="blank2">
                    <a herf="#">
                        <svg version="1.1" viewBox="0 0 600 516.8">
                            <polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
                        </svg>
                        <span> </span>
                    </a>
                </li>


            </ul>           
        </div>

的CSS：

    @charset "utf-8";
.menu {
    position: absolute;
    margin: 1em 1em;
}
.menu ul {
    list-style: none; /*removes bullets*/
    margin: 0;
    padding: 0;
}
.menu ul li{
    position: absolute; /*allows change position of my menu items*/
    list-style-type: none;
}
.menu ul li a { /*ul #LISTNAME a could be used for sepcific list*/
    /*float: left; moves sub menued items to left*/
    text-decoration: none; /*removes all atributes*/
    display: block;
    /*color: white; makes all text white*/
    font-family: "sans-serif"; /*sets font*/
    text-transform: uppercase; /*makes it all uppercase*/
    font-size: 0.8em; /*shrinks font and svgs*/
    letter-spacing: 0.1em; /*spaces letters*/
    position: relative;

}
.menu ul li a svg{
    /*handled on page layout*/  
}
.menu ul li a span{
    position: absolute; /*puts it all close together in 3 colums*/
    display: inline-block; /*clickable chunk vs clickable word*/
    top: 0.5em; /*moves all words back up*/
    left: 0.25em;
    padding: 2em 0;
    width: 6em;
    height: 1.5em;
    text-align: center; /*centers worts at top of hexagon*/

}
.menu ul.sub-menu{
    display: none;
    max-height: 0; /*removes highth from submenue for main menu*/
    overflow: hidden;
    border: 2px solid white; /*line between sub menu items*/
    float: left; /*puts line and words to left*/
    width: 175px; /*sets size of blocks*/
    margin-top: -47px; /*moves menu up*/
    opacity: 0;
}
.menu ul.sub-menu:hover{
    display: block;
    overflow: visible;
}
.menu ul.sub-menu li {
    position: relative;
    padding: 7px 10px; /*spaces out links in submenue*/
    white-space: nowrap;
}
.menu ul li.svg_hexagon.dropdown > a:after{
    content: '';/*holds content*/
    display: block;
    height: 2px;
    width: 0;
    background: pink;
    position: absolute;
    top: 50%;
    margin-top: -3px;
    left: 100%;
}
.menu ul.sub-menu li:not(:last-child){
    border-bottom: 2px solid white;
}
.menu ul.sub-menu li a{
    float: none;
}
.menu ul li.dropdown:nth-child(odd).active a:after{
    width: 17em;
}
.menu ul li.dropdown:nth-child(odd) .sub-menu {
    margin-top: 2.5em; /*puts sub menu below main menu*/
    margin-left: 0.5em; /*centers submenu below main menu item*/
}
.menu ul li.dropdown:nth-child(even).active a:after{
    width: 207px;
}
.menu ul li.dropdown:nth-child(even) .sub-menu{
    margin-left: 107px;
} 
.menu ul li.active .sub-menu{
    display: inline-block; 
}
/*my main ut page*/
ul li#ut_main{
    top: 5.6em;
    left: 5.7em;
}
ul li#home{
    top: 11.7em;
    left: 11.5em;
}
ul li#about{
    top: 9.3em;
    left: 15.7em;
}
ul li#info{
    left: 19.85em;
    top: 11.7em;
}
ul li#contact{
    top: 9.3em;
    left: 24.0em;
}
ul li#blank1{
    top: 11.5em;
    left: 0.5em;
}
ul li#blank2{
    left: 11.5em;
    top: 1.1em;
}

Answer 1

您似乎在herf代码中写了href而不是<a></a>。

这里是修复代码：

＆＃13;

@charset "utf-8";

/*********************************************************************
Main Menu
	.wrapper .menu - starting posisiton of menu
	.wrapper .menu ul - removes bullet poitns, sets words = to svg file
	.menu ul li - puts everything together at top corner
	


*********************************************************************/
.menu {
  position: absolute;
  margin: 1em 1em;
}

.menu ul {
  list-style: none;
  /*removes bullets*/
  margin: 0;
  padding: 0;
}

.menu ul li {
  position: absolute;
  /*allows change position of my menu items*/
  list-style-type: none;
}

.menu ul li a {
  /*ul #LISTNAME a could be used for sepcific list*/
  /*float: left; moves sub menued items to left*/
  text-decoration: none;
  /*removes all atributes*/
  display: block;
  color: white;
  /*makes all text white*/
  font-family: "sans-serif";
  /*sets font*/
  text-transform: uppercase;
  /*makes it all uppercase*/
  font-size: 0.8em;
  /*shrinks font and svgs*/
  letter-spacing: 0.1em;
  /*spaces letters*/
  position: relative;
}

.menu ul li a svg {
  /*handled on page layout*/
}

.menu ul li a span {
  position: absolute;
  /*puts it all close together in 3 colums*/
  display: inline-block;
  /*clickable chunk vs clickable word*/
  top: 0.5em;
  /*moves all words back up*/
  left: 0.25em;
  padding: 2em 0;
  width: 6em;
  height: 1.5em;
  text-align: center;
  /*centers worts at top of hexagon*/
}


/********************************************************************
Sub menu navigation
	.menu ul.sub-menu - Builds sub menu
	.menu ul.sub-menu li - sets spacing between menu
	.menu ul.sub-menu - hides sub menu, 
	.menu ul.sub-menu li - sets with and highth of submenu box
	.menu ul.sub-menu li:not(:last-child) - draws boarder for box
	.menu ul.sub-menu li a -

********************************************************************/

.menu ul.sub-menu {
  display: none;
  max-height: 0;
  /*removes highth from submenue for main menu*/
  overflow: hidden;
  border: 2px solid white;
  /*line between sub menu items*/
  float: left;
  /*puts line and words to left*/
  width: 175px;
  /*sets size of blocks*/
  margin-top: -47px;
  /*moves menu up*/
  opacity: 0;
}

.menu ul.sub-menu:hover {
  display: block;
  overflow: visible;
}

.menu ul.sub-menu li {
  position: relative;
  padding: 7px 10px;
  /*spaces out links in submenue*/
  white-space: nowrap;
}

.menu ul li.svg_hexagon.dropdown>a:after {
  content: '';
  /*holds content*/
  display: block;
  height: 2px;
  width: 0;
  background: pink;
  position: absolute;
  top: 50%;
  margin-top: -3px;
  left: 100%;
}

.menu ul.sub-menu li:not(:last-child) {
  border-bottom: 2px solid white;
}

.menu ul.sub-menu li a {
  float: none;
}

.menu ul li.dropdown:nth-child(odd).active a:after {
  width: 17em;
}

.menu ul li.dropdown:nth-child(odd) .sub-menu {
  margin-top: 2.5em;
  /*puts sub menu below main menu*/
  margin-left: 0.5em;
  /*centers submenu below main menu item*/
}

.menu ul li.dropdown:nth-child(even).active a:after {
  width: 207px;
}

.menu ul li.dropdown:nth-child(even) .sub-menu {
  margin-left: 107px;
}

.menu ul li.active .sub-menu {
  display: inline-block;
}


/********************************************************************
Menu positioning
********************************************************************/


/*my main ut page*/

ul li#ut_main {
  top: 5.6em;
  left: 5.7em;
}


/*about mmain menu*/

ul li#home {
  top: 11.7em;
  left: 11.5em;
}


/*about about menu*/

ul li#about {
  top: 9.3em;
  left: 15.7em;
}


/*info menu*/

ul li#info {
  left: 19.85em;
  top: 11.7em;
}


/*Contact main menu*/

ul li#contact {
  top: 9.3em;
  left: 24.0em;
}


/*top left corner blank*/

ul li#blank1 {
  top: 11.5em;
  left: 0.5em;
}


/*top right corner blank*/

ul li#blank2 {
  left: 11.5em;
  top: 1.1em;
}

body {
  /*background-image: url("../images/QDTINU.png");*/
  background-color: black;
}

.Top_Right_Logo {
  float: left;
  margin: 0;
  padding: 0;
  top: 0;
  position: absolute;
}

#music {
  visibility: hidden;
  position: bottom;
}

.menu ul #ut_main a svg {
  stroke: white;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

.menu ul #ut_main:hover a svg {
  stroke: yellow;
  fill: #00A94F;
}

.menu ul #ut_main a:hover {
  color: white;
}

#home a svg {
  stroke: red;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

#about a svg {
  stroke: white;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

#info a svg {
  stroke: red;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

#contact a svg {
  stroke: white;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

#blank1 a svg {
  stroke: blue;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

#blank2 a svg {
  stroke: blue;
  stroke-width: 1em;
  width: 6.5em;
  height: 6.5em;
  fill: transparent;
  transition: all 0.1s ease-in-out;
}

＆＃13;

<body>

  <div class="wrapper">

    <div class="menu" data-depth="0.80">
      <ul>
        <li class="svg_hexagon" id="ut_main">
          <a href="../index.html">
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <span> UT Main </span>
          </a>
        </li>

        <li class="svg_hexagon" id="home">
          <a href="../assign2/index.html">
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <span> Home </span>
          </a>
        </li>

        <li class="svg_hexagon dropdown" id="about">
          <a href="#">
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <span> About </span>
          </a>

          <ul class="sub-menu">
            <li>
              <a href="#">The Artist</a>
            </li>

            <li>
              <a href="#">The Work</a>
            </li>
          </ul>

        </li>

        <li class="svg_hexagon" id="info">
          <a href="#">
            <!-- draw hexagon -->
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <!-- hexagon drawn -->
            <span> Info </span>
          </a>
        </li>

        <li class="svg_hexagon dropdown" id="contact">
          <a href="#">
            <!-- draw hexagon -->
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <!-- hexagon drawn -->
            <span> Contact </span>
          </a>

          <ul class="sub-menu">
            <li>
              <a href="#">E-Mail</a>
            </li>

            <li>
              <a href="https://www.facebook.com/glen.newell">Facebook</a>
            </li>
          </ul>

        </li>

        <li class="svg_hexagon" id="blank1">
          <a href="#">
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <span> </span>
          </a>
        </li>

        <li class="svg_hexagon" id="blank2">
          <a href="#">
            <svg version="1.1" viewBox="0 0 600 516.8">
								<polygon points="150.7,516.8 1.5,258.4 150.7,0 449,0 598.2,258.4 449,516.8 "/>
							</svg>
            <span> </span>
          </a>
        </li>


      </ul>
    </div>
  </div>
</body>

＆＃13;

正如您所看到的，即使它无法找到您的<a></a>代码所指的文件，该代码段会尝试导航到点击位置

如何仅使用HTML和CSS制作SVG菜单？

1 个答案: